

<template>
  <div class="container">
    <div class="notice-div">
      <el-row>
        <el-col span="20">
          <div> 重要咨询 </div>
        </el-col>

        <el-col span="4">
          <div>
            <el-button v-show="role === '管理员'"  style="background-color: #ff5600; color: #ffffff;" @click="showDialog">添加咨询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="咨询上传" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="展示名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择活动区域" style="width: 100%;">
            <el-option label="公告" value="公告"></el-option>
            <el-option label="分数" value="分数"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询文件">
          <el-upload
              class="upload-demo"
              action="http://localhost:8085/upload/resource"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveResource">确 定</el-button>
      </div>
    </el-dialog>

    <div class="down-div">
      <el-row>
        <el-col class="col-div" span="11">
          <el-card class="box-card">
            <div style="text-align: center; padding: 10px 0 20px 0">历年一分一档表</div>
            <el-row  v-for="(link, index) in scoreList"  :key="index">
              <el-link type="primary" :underline="false" :href="link.link" target="_blank">
                {{link.name}}
              </el-link>
            </el-row>

          </el-card>
        </el-col>
        <el-col  class="col-div" span="11">
          <el-card class="box-card">
            <div style="text-align: center; padding: 10px 0 20px 0">通知</div>
            <el-row  v-for="(link, index) in noticeList"  :key="index">
              <el-link type="primary" :underline="false" :href="link.link" target="_blank">
                {{link.name}}
              </el-link>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script >
import {listNotices, saveResource} from "@/api/request";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Index',
  data() {
    return {
      role: '',
      fileList: [],
      formLabelWidth: 100,
      form: {
        'category': '分数',
        'name': '',
        'link': '',
      },
      dialogFormVisible: false,
      scoreList: [],
      noticeList: []
    }
  },

  methods: {

    saveResource(){
      if (!this.form.link) {
        this.$message.error("请上传资源文件")
        return
      }

      if (!this.form.name) {
        this.$message.error("请填写资源名称")
        return
      }

      saveResource(this.form).then(() => {
        this.listNoticeData()
        this.dialogFormVisible = false
      })

    },

    handleSuccess(res, file){
      console.log(file)
      this.form.link = res.data
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      console.log(files)
      this.$message.warning(`当前限制上传 1 个文件`);
    },
    beforeRemove(file, fileList) {
      console.log(fileList)
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    showDialog(){
      this.form = {
        'category': '分数',
        'name': '',
        'link': '',
      }

      this.dialogFormVisible = true
    },

    listNoticeData(){
      listNotices().then(res => {
        console.log(res)
        if (res.code === 200) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].link = "http://localhost:8085/upload/" + res.data[i].link
          }
          this.scoreList = res.data.filter(item => item.category === '分数');
          this.noticeList = res.data.filter(item => item.category === '公告');
        }
      })
    }
  },

  mounted() {
    this.role = JSON.parse(sessionStorage.getItem('user')).role
    this.listNoticeData()
  }
}
</script>

<style scoped>
.notice-div {
  margin:5px;
  height: max-content;
  padding: 0 10px;
}

.down-div {
  margin: 20px;
  height: max-content;
}

.col-div {
  margin: 0 10px;
}
</style>